<!-- NewTrainStudy_frame.html -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/html-base.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/public-train.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/train.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/base.css"/>
    <style type="text/css">
    	.listcontainer {
    		padding-top: 0.4rem;
    	}
    </style>
</head>
<body>
	<div class="allcontainer">
		<div class="listcontainer">
			<div class="searchcontainer" hidden="hidden">
				<div class="searchbox">
					<span class="mui-icon mui-icon-search"></span>
					<input type="text" name="" id="course_serach_input" value="" placeholder="搜索你想要的培训课"/>
				</div>
			</div>
			<!--线上课程-->
			<div class="listwrapper">
				<ul id="course_list" class="listbox">
					<!-- <li>
						<a href="train-det-kc.html">
							<div class="u-img"><img src="../../image/default-pic01.png"/></div>
							<div class="u-txt">
								<h3>挡不住的跨境电商时代</h3>
								<p>本培训将线上和线下，理论知识和专业技能有机结合在一起，并平结合在一起，并平</p>
								<div><p class="marktxt">祁振国  17课时</p> <span class="pricetxt">￥380.00</span></div>
							</div>
						</a>
					</li> -->
				</ul>
				<div class="noSign" hidden="hidden" id="noData">
					<img src="../../image/default-pic03.png" width="60%">
					<p class="font16 top_15 base_dark_grey" >
						暂无数据
					</p>
				</div>
				<div class="loadFailure" hidden="hidden" id="noNet">
					<img src="../../image/icon_img01.png" width="60%">
					<p class="" >
						数据加载失败
					</p>
					<p>
						请检查您的网络
					</p>
					<button type="button" class="mui-btn mui-btn-outlined" onclick="refreshData()">
						重新加载
					</button>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/newresize.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/mui.min.js"></script>
<script type="text/javascript" src="../../script/MD5.js"></script>
<script type="text/javascript" src="../../script/requestTool.js"></script>
<script type="text/javascript" src="../../script/timeStampTool.js"></script>
<script type="text/javascript">
	var page = 1;
	var rows = 10;
	var dropRefreshCount = 0;
	var courseArr = new Array();
	var cate;
	apiready = function(){
		prepareData();
		setRefreshHeader();
		setPullUpRefresh();
		loadData();
	}
	function prepareData(){
		cate = api.pageParam.cate;
	}
	//下拉刷新
	function setRefreshHeader() {
		api.setRefreshHeaderInfo({
			visible : true,
			bgColor : '#ccc',
			textColor : '#fff',
			textDown : '下拉刷新...',
			textUp : '松开刷新...',
			showTime : true
		}, function(ret, err) {
			refreshData();
		});
	}
	// 上拉加载
	function setPullUpRefresh() {
		api.addEventListener({
			name : 'scrolltobottom'
		}, function(ret, err) {
			if (dropRefreshCount >= rows) {
				dropRefreshCount = 0;
				page++;
				loadData();
			}
		});
	}
	function refreshData(){
		page = 1;
		loadData();
	}
	function loadData(){
		if (page == 1) {
			api.showProgress({
			    style: 'default',
			    animationType: 'fade',
			    title: '数据加载中...',
			    text: '',
			    modal: false
			});
		}
		var params = {
			cate : cate,
			page : page, 
			rows : rows,
			uid : $api.getStorage('cfnetppuid'),
			// uid : '15107',
			status : 3
		};
		cfnetppPOST(url_train_getOrderList, params, true, function(data, status){
			api.refreshHeaderLoadDone();
			api.hideProgress();
			if (status == "success") {
				if (data.code == 200) {
					if (page == 1) {
						classArr = [];
						$('#course_list').html('');
					}
					var courses = data.data.data;
					if (courses != undefined && courses != null && courses.constructor == Array && courses.length > 0) {
						$('#noData').hide();
						$('#noNet').hide();
						dropRefreshCount = courses.length;
						setupCourseHtml(courses);
					}else{
						$('#course_list').html('');
						$('#noData').show();
						$('#noNet').hide();
					}
				}else{
					if (page == 1) {
						$('#course_list').html('');
						$('#noData').show();
						$('#noNet').hide();
					}
				}
			}else{
				if (page == 1) {
					$('#course_list').html('');
					$('#noData').hide();
					$('#noNet').show();
				}
			}
		});
	}
	function setupCourseHtml(arr){
		var oldCount = courseArr.length;
		courseArr = courseArr.concat(arr);
		var newCount = courseArr.length;
		for (var i = oldCount; i < newCount; i++) {
			var courseData = courseArr[i];
			$('#course_list').append(courseCellHtml(i, courseData));
		}
		setupCellClick();
	}
	function setupCellClick(){
		$('.course-cell').unbind('click');
		$('.course-cell').click(function(){
			var index = $(this).attr('index');
			var courseData = courseArr[parseInt(index)];
			courseData["id"]=courseData.link_id;
			courseData["buyStatus"] = 1;
			if (cate == 111) {
				api.openWin({useWKWebView:true,
				    name: 'train-det-px',
				    url: 'train-det-px.html',
				    pageParam: courseData
				});
			}else{
				api.openWin({useWKWebView:true,
				    name: 'train-det-kc',
				    url: 'train-det-kc.html',
				    pageParam: courseData
				});
			}
		});
	}
	function courseCellHtml(index, data){
		if (cate == 111) {
			return '<li index="'+index+'" class="course-cell">'+
					'<a href="javascript:;">'+
						'<div class="u-img"><img src="'+data.imgge+'"/></div>'+
						'<div class="u-txt">'+
							'<h3>'+data.product_name+'</h3>'+
							'<p>'+data.brief+'</p>'+
							'<div><p class="marktxt">'+timeStringWithTimeStamp(data.createtime)+'</p></div>'+
						'</div>'+
					'</a>'+
				'</li>';
		}else{
			return '<li index="'+index+'" class="course-cell">'+
					'<a href="#">'+
						'<div class="u-img"><img src="'+data.imgge+'"/></div>'+
						'<div class="u-txt">'+
							'<h3>'+data.product_name+'</h3>'+
							'<p>'+data.brief+'</p>'+
							'<div><p class="marktxt">'+data.teachername+'  '+data.course_period+'课时</p></div>'+
						'</div>'+
					'</a>'+
				'</li>';
		}
	}
</script>
</html>

